<template>
  <div>
    <div id="nav">
      <div class="nav_top">
        <p class="p_1">查询</p>
      </div>
      <div class="nav_mid">
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.menu_name"
                      placeholder="请输入菜品名称进行搜索"
                      class="input_1"></el-input>
          </el-form-item>
          <div>
            <el-form-item label="筛选：">
              <el-date-picker v-model="formInline.order_time"
                              type="datetimerange"
                              align="right"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :picker-options="pickerOptions"
                              format="yyyy 年 MM 月 dd 日 hh 时 mm 分 ss 秒"
                              value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>
              <el-form-item>
                <el-button type="primary"
                           round
                           class="search"
                           @click="onSearch">查询</el-button>
                <el-button type="primary"
                           round
                           class="search"
                           @click="onReset">重置</el-button>
              </el-form-item>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="nav_bottom clear">
      <p class="ziti">明细数据</p>
      <el-button type="info"
                 round
                 class="export"
                 @click="onExport">
        导出
      </el-button>
    </div>
    <div id="shuju"
         class="clear">
      <div class="shuju_1">
        <p>销售额</p>
        <el-input v-model="xiaoshou"
                  disabled
                  placeholder="￥0.00"
                  class="input_2"></el-input>
      </div>
      <div class="shuju_2">
        <p>退单额</p>
        <el-input v-model="tuidan"
                  disabled
                  placeholder="￥0.00"
                  class="input_3"></el-input>
      </div>
      <div class="shuju_2">
        <p>收入额</p>
        <el-input v-model="shouru"
                  disabled
                  placeholder="￥0.00"
                  class="input_4"></el-input>
      </div>
      <div class="shuju_2">
        <p>销售菜品</p>
        <el-input v-model="xiaoshoucaipin"
                  disabled
                  placeholder="0种"
                  class="input_5"></el-input>
      </div>
      <div class="shuju_2">
        <p>菜品均价</p>
        <el-input v-model="junjia"
                  disabled
                  placeholder="￥0.00"
                  class="input_6"></el-input>
      </div>
    </div>
    <el-table :data="tableData"
              stripe
              style="width: 100%"
              :cell-style="{border:'1px solid #DCDCDC'}"
              :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
      <el-table-column prop="dish_id"
                       label="序号"
                       width="140"
                       align='center'></el-table-column>
      <el-table-column width="150"
                       prop="menu_name"
                       label="菜品名称"
                       align='center'></el-table-column>
      <el-table-column width="150"
                       prop="pay_way"
                       label="付款方式"
                       align='center'></el-table-column>
      <el-table-column width="130"
                       prop="dish_amount"
                       label="销售量"
                       align='center'></el-table-column>
      <el-table-column width="150"
                       prop="menu_price"
                       label="单价"
                       align='center'></el-table-column>
      <el-table-column width="220"
                       prop="order_time"
                       label="时间"
                       align='center'></el-table-column>
      <el-table-column width="160"
                       prop="user_name"
                       label="收银员"
                       align='center'></el-table-column>
      <el-table-column width="160"
                       prop="dish_money"
                       label="金额"
                       align='center'></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handlePageChange"
                     :page-sizes="[5,10,15,20,25,30]"
                     :page-size="count"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="totalData.length">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formInline: {
        menu_name: "",
        order_time: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      xiaoshou: 0,
      tuidan: 0,
      shouru: 0,
      xiaoshoucaipin: 0,
      junjia: 0,
      chengben: 0,
      zongjia: 0,
      totalData: [],
      page: 1,
      count: 5,
    };
  },
      methods: {
          getuser: function () {
            this.$axios({
                url: '/foodwater/getfoodwater'
            }).then((res) => {
               this.totalData=res.data.data
               this.totalData.forEach((v,i)=>{
                   v.dish_money =v.menu_price * v.dish_amount
                   this.xiaoshou += v.dish_money
                   this.tuidan += v.order_refund_money
                   this.chengben += v.menu_cost * v.dish_amount
                   this.shouru = this.xiaoshou - this.chengben
                   this.xiaoshoucaipin += v.dish_amount
                   this.zongjia += v.menu_price/this.totalData.length
                   this.junjia = this.zongjia.toFixed(2)
                   return v
               })
                  this.xiaoshou='￥'+this.xiaoshou
                  this.tuidan='￥'+this.tuidan
                  this.shouru='￥'+this.shouru
                  this.xiaoshoucaipin='￥'+this.xiaoshoucaipin
                  this.zongjia='￥'+this.zongjia
                  this.junjia='￥'+this.junjia
            })
        },
    onSearch() {
        if(!this.formInline.order_time.length){
                this.formInline.order_time=['','']
            }
            this.$axios({
               url:'/foodwater/getfoodwaterid',
               params:this.formInline,
            }).then((res)=>{
                this.totalData=res.data.data
                   this.xiaoshou = 0
                   this.tuidan = 0
                   this.chengben = 0
                   this.shouru = 0
                   this.xiaoshoucaipin = 0
                   this.zongjia = 0
                   this.junjia = 0
                this.totalData.forEach(v=>{
                   v.dish_money =v.menu_price * v.dish_amount
                   this.xiaoshou += v.dish_money
                   this.tuidan += v.order_refund_money
                   this.chengben += v.menu_cost * v.dish_amount
                   this.shouru = this.xiaoshou - this.chengben
                   this.xiaoshoucaipin += v.dish_amount
                   this.zongjia += v.menu_price/this.totalData.length
                   this.junjia = this.zongjia.toFixed(2)
                   return v
               })
                  this.xiaoshou='￥'+this.xiaoshou
                  this.tuidan='￥'+this.tuidan
                  this.shouru='￥'+this.shouru
                  this.xiaoshoucaipin='￥'+this.xiaoshoucaipin
                  this.zongjia='￥'+this.zongjia
                  this.junjia='￥'+this.junjia
            })
    },
    onReset () {
      this.formInline = {
        menu_name: "",
        order_time: "",
      }
      this.getuser();
    },
    onExport () {
      this.$alert('是否确认导出明细？', {
        title: '导出明细',
        callback: (action) => {
          if (action == 'confirm') {
            let datalist = [];
            datalist.push([
              "序号",
              "菜品名称",
              "支付方式",
              "销售量",
              "单价",
              "时间",
              "收银员",
              "金额"
            ]);
            this.tableData.forEach(item => {
              datalist.push([
                item.dish_id,
                item.menu_name,
                item.pay_way,
                item.dish_amount,
                item.menu_price,
                item.order_time,
                item.user_name,
                item.dish_money
              ]);
            });
            this.$downloadXlsx(datalist, "订单信息明细数据.xlsx");
            this.$message({
              type: 'success',
              message: '导出成功!'
            });
          } else {
            this.$message({
              type: 'cancel',
              message: '已取消导出。'
            });
          }
        }
      });
    },
    // 每页多少条数据
    handleSizeChange (count) {
      this.count = count
    },
    // 分页
    handlePageChange (page) {
      this.page = page
    },
  },
  created: function () {
    this.getuser();
  },
  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count);
    }
  }
}
</script>
<style scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#nav {
  border: 1px solid rgba(242, 242, 242);
}
.nav_top {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
}
.p_1 {
  margin: 0 0 0 20px;
}
.nav_mid {
  padding: 40px 0 12.2px 30px;
}
.input_1 {
  width: 350px;
}
.el-date-editor {
  width: 350px;
}
#nav {
  border: 1px solid rgba(242, 242, 242);
}
.nav_bottom {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
  margin: 15px 0 15px 0;
}
.ziti {
  float: left;
  margin: 0 0 0 20px;
}
.export {
  width: 80px;
  float: right;
  margin-right: 35px;
  margin-top: 5px;
  height: 40px;
}
.search {
  margin-left: 20px;
  width: 80px;
  height: 40px;
}
#shuju {
  padding: 0 0 15px 140px;
}
.shuju_1 {
  float: left;
  text-align: center;
}
.shuju_2 {
  float: left;
  margin-left: 100px;
  text-align: center;
}
.input_2,
.input_3,
.input_4,
.input_5,
.input_6 {
  margin-top: 20px;
  width: 115px;
}
.block {
  text-align: center;
  margin-top: 50px;
}
.el-date-editor /deep/ .el-range-separator {
  padding: 0;
}
.input_2 /deep/ .el-input__inner,
.input_3 /deep/ .el-input__inner,
.input_4 /deep/ .el-input__inner,
.input_5 /deep/ .el-input__inner,
.input_6 /deep/ .el-input__inner {
  text-align: center;
}
</style>